<template>
	<view class="container">
		<u-tabs-swiper
			ref="uTabs"
			:fontSize="tabOptions['font-size']"
			activeColor="#fa5514"
			:inactiveColor="tabOptions['inactive-color']"
			:barWidth="tabOptions['bar-width']"
			:bgColor="tabOptions['bg-color']"
			:gutter="tabOptions.gutter"
			:list="list2"
			:current="current2"
			@change="e => tabsChangeTwo(e)"
			:is-scroll="false"
			swiperWidth="750"
		/>
		<u-tabs-swiper
			ref="uTabs"
			:fontSize="tabOptions['font-size']"
			:activeColor="tabOptions['active-color']"
			:inactiveColor="tabOptions['inactive-color']"
			:barWidth="tabOptions['bar-width']"
			:bgColor="tabOptions['bg-color']"
			:gutter="tabOptions.gutter"
			:list="list"
			:current="current"
			@change="tabsChange"
			:is-scroll="false"
			swiperWidth="750"
			v-if="current2 == 1"
		/>

		<view class="rank" v-if="current2 == 1">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
						<view class="top">
							<view :class="'rank-item rank-item__' + index" v-for="(t, index) in topList" :key="index">
								<view :class="'tag tag' + index"> TOP{{ t.ownIndex || 0 }} </view>
								<image
									class="avator"
									:src="t.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png'"
									mode="scaleToFill"
								/>
								<view class="name">{{ t.nickName || '-' }}</view>
								<view class="lv lv--strong">
									<image
										class="lv-img"
										src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
										mode="scaleToFill"
									/>
									<view class="lv-text">
										<text>{{ level.getLevelText('strong') }}</text>
									</view>
								</view>
								<view class="num">{{ t.studentsAmount || 0 }}人</view>
							</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item" v-for="(d, index) in rankList" :key="index">
								<view class="left">
									<view :class="'tag tag' + index">
										{{ d.ownIndex || 0 }}
									</view>
									<image
										class="avator"
										:src="d.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png'"
										mode="scaleToFill"
									/>
									<view class="info">
										<view class="name">{{ d.nickName || '-' }}</view>
										<view class="lv lv--strong">
											<image
												class="lv-img"
												src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
												mode="scaleToFill"
											/>
											<view class="lv-text">
												<text>{{ level.getLevelText('strong') }}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="num">{{ d.studentsAmount || 0 }}人</view>
								<view>
									<view class="top_dz" v-if="!d.ifDz" @click="topDz(d)">
										<view class="dz">点赞</view>
										<view class="ydz">{{ d.dzAmount }}人已点赞</view>
									</view>
									<view class="top_dz" v-else>
										<view class="dz top_dzy">已点赞</view>
										<view class="ydz">{{ d.dzAmount }}人已点赞</view>
									</view>
								</view>
							</view>
							<view v-if="rankList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
								<image
									style="width: 500rpx"
									mode="widthFix"
									src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
								/>
							</view>
						</view>
						<!-- 站位 -->
						<view style="height: 100rpx"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="zhaomubox" v-if="current2 == 0">
			<view class="item" v-for="(t, idx) in zhaomuList" :key="idx">
				<view style="position: absolute; left: 30rpx; top: 0">
					<view :class="'tag tag' + idx"> TOP{{ t.ownIndex || 0 }} </view>
				</view>
				<view class="top_dz" v-if="!t.ifDz" @click="topDz(t)">
					<view class="dz">点赞</view>
					<view class="ydz">{{ t.dzAmount }}人已点赞</view>
				</view>
				<view class="top_dz" v-else>
					<view class="dz top_dzy">已点赞</view>
					<view class="ydz">{{ t.dzAmount }}人已点赞</view>
				</view>
				<view class="content">
					<img
						class="headpng"
						:src="t.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png'"
					/>
					<view class="nickname">{{ t.nickName }}</view>
					<view class="nenglaing"> Lv.{{ t.vipRank }}能量王者 </view>
				</view>
				<view class="bottombox">
					<view class="b_left">
						<view class="b_l_top">
							<view>已招生{{ t.studentsAmount }}人</view>
							<view>计划招生{{ t.planAmount }}人</view>
						</view>
						<view class="jindu">
							<view class="jinduf" :style="{ width: (t.studentsAmount / t.planAmount) * 100 + '%' }"></view>
						</view>
					</view>
					<view class="b_right">{{ t.schedule }}%</view>
				</view>
			</view>
			<view v-if="zhaomuList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
				<image
					style="width: 500rpx"
					mode="widthFix"
					src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
				/>
			</view>
		</view>
		<view class="myzhaomu" v-if="current2 == 0 && myzhaomuList.length > 0">
			<view class="item" v-for="(t, idx) in myzhaomuList" :key="idx" style="background: #f95513">
				<view style="position: absolute; left: 30rpx; top: 0">
					<view :class="'tag'"> TOP{{ t.ownIndex || 0 }} </view>
				</view>
				<view class="top_dz" v-if="!t.ifDz" @click="topDz(t)">
					<view class="dz">点赞</view>
					<view class="ydz" style="color: #fff"> {{ t.dzAmount }}人已点赞</view>
				</view>
				<view class="top_dz" v-else style="color: #fff">
					<view class="dz top_dzy">已点赞</view>
					<view class="ydz" style="color: #fff"> {{ t.dzAmount }}人已点赞</view>
				</view>
				<view class="content">
					<img
						class="headpng"
						:src="t.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png'"
					/>
					<view class="nickname">{{ t.nickName }}</view>
					<view class="nenglaing"> Lv.{{ t.vipRank }}能量王者 </view>
				</view>
				<view class="bottombox">
					<view class="b_left">
						<view class="b_l_top" style="color: #fff">
							<view>已招生{{ t.studentsAmount }}人</view>
							<view>计划招生{{ t.planAmount }}人</view>
						</view>
						<view class="jindu">
							<view
								class="jinduf"
								:style="{ width: (t.studentsAmount / t.planAmount) * 100 + '%', background: '#FFF' }"
							></view>
						</view>
					</view>
					<view class="b_right">{{ t.schedule }}%</view>
				</view>
			</view>
		</view>
		<view class="myzhaomu0" v-if="current2 == 1 && myzhaomuList.length > 0">
			<view class="rank-list-item" v-for="(d, index) in myzhaomuList" :key="index">
				<view class="left">
					<view :class="'tag tag' + index">
						{{ d.ownIndex || 0 }}
					</view>
					<image
						class="avator"
						:src="d.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png'"
						mode="scaleToFill"
					/>
					<view class="info">
						<view class="name">{{ d.nickName || '-' }}</view>
						<view class="lv lv--strong">
							<image
								class="lv-img"
								src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
								mode="scaleToFill"
							/>
							<view class="lv-text">
								<text>{{ level.getLevelText('strong') }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="num">{{ d.studentsAmount || 0 }}人</view>
				<view>
					<view class="top_dz" v-if="!d.ifDz" @click="topDz(d)">
						<view class="dz">点赞</view>
						<view class="ydz">{{ d.dzAmount }}人已点赞</view>
					</view>
					<view class="top_dz" v-else>
						<view class="dz top_dzy">已点赞</view>
						<view class="ydz">{{ d.dzAmount }}人已点赞</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import level from '@/utils/level'
import { getTopList, topDz } from '@/api/yanxue/user'
export default {
	data() {
		return {
			current: 0,
			current2: 0,
			swiperCurrent: 0,
			list2: [
				{
					name: '招募进度条'
				},
				{
					name: '招生排行榜'
				}
			],
			list: [
				{
					name: '总榜'
				},
				{
					name: '月榜'
				},
				{
					name: '周榜'
				},
				{
					name: '日榜'
				}
			],
			tabOptions: {},
			level: level,
			topList: [], // 前三名
			rankList: [],
			zhaomuList: [],
			myzhaomuList: []
		}
	},
	onShow() {
		// let topList = this.rankList.slice(0, 3);
		// let first = topList[0];
		// let last = topList[2];
		// let second = topList[1];
		// this.topList = [second, first, last];
		this.getTopList()
	},
	methods: {
		topDz(item) {
			topDz({ toUserId: item.userId, type: this.current2 == 0 ? 5 : this.current + 1 }).then(res => {
				uni.showToast({ title: '点赞成功', icon: 'none' })
				this.getTopList()
			})
		},
		getTopList() {
			getTopList({ type: this.current2 == 0 ? 5 : this.current + 1 }).then(res => {
				console.log(res)
				let first = res.result.filter(x => x.ownIndex == 1)[0] || {}
				let last = res.result.filter(x => x.ownIndex == 3)[0] || {}
				let second = res.result.filter(x => x.ownIndex == 2)[0] || {}
				this.myzhaomuList = res.result.filter(x => x.ifOwn)
				this.topList = [second, first, last]
				this.rankList = res.result.filter(x => x.ownIndex > 3) || []
			})
		},
		onreachBottom() {},
		tabsChange(index) {
			this.swiperCurrent = index
		},
		tabsChangeTwo(e) {
			this.current2 = e
		},

		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
			this.getTopList()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: scroll;
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	.myzhaomu0 {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 174rpx;
		width: 750rpx;
		background: #fff;
	}
	.myzhaomu {
		padding: 24rpx;
		position: fixed;
		width: 100%;
		height: 350rpx;
		background: #fff;
		bottom: 0;
		left: 0;
	}
	.rank {
		height: 100%;
		padding-bottom: 200rpx;
	}
	.top_dz {
		text-align: right;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		.dz {
			width: 109rpx;
			height: 36rpx;
			background: #f95513;
			border-radius: 18rpx;
			line-height: 36rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 22rpx;
			text-align: center;
			color: #ffffff;
		}
		.ydz {
			width: 94rpx;
			height: 22rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 16rpx;
			color: #c4c3c3;
		}
		.top_dzy {
			color: #f95513;
			background: #fff;
			border: 3rpx solid #f95513;
		}
	}
	.zhaomubox {
		width: 750rpx;
		padding: 24rpx;
		padding-bottom: 350rpx;
	}
	.item {
		width: 702rpx;
		height: 310rpx;
		background: #ffffff;
		box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
		border-radius: 40rpx;
		padding: 20rpx 16rpx 20rpx 30rpx;
		position: relative;
		margin-bottom: 30rpx;
		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.headpng {
				width: 100rpx;
				height: 100rpx;
			}
			.nickname {
				flex: 1;
				width: 250rpx;
				height: 50rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #2e2e2e;
				margin: 0 20rpx;
			}
			.nenglaing {
				width: 192rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #e49d67 0%, #fce3bd 100%);
				box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
				border-radius: 15rpx;
				line-height: 30rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #ffffff;
				text-align: center;
			}
		}
		.bottombox {
			display: flex;
			.b_left {
				width: 534rpx;
				margin-right: 30rpx;
				.b_l_top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #2e2e2e;
				}
			}
			.jindu {
				width: 100%;
				height: 8rpx;
				background: #ffba9f;
				margin-top: 26rpx;
				.jinduf {
					background: #f95513;
					height: 8rpx;
					width: 50%;
				}
			}
			.b_right {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #f95513;
				padding-top: 34rpx;
			}
		}
	}
}
.tag1 {
	background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
	font-size: 32rpx;
	margin-bottom: 20rpx;
}

.tag0 {
	background: linear-gradient(0deg, #43ea80 0%, #38f8d4 100%);
	font-size: 30rpx;
	margin-bottom: 18rpx;
}

.tag2 {
	background: linear-gradient(0deg, #93a5cf 0%, #b4ece9 100%);
	font-size: 30rpx;
	margin-bottom: 18rpx;
}

.tag {
	width: 142rpx;
	height: 47rpx;
	border-radius: 10rpx 10rpx 30rpx 30rpx;
	color: #fff;
	text-align: center;
	line-height: 47rpx;
}
.swiper-item {
	.top {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		padding: 20rpx 30rpx;

		.rank-item {
			width: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 218rpx;
			height: 325rpx;
			background: #ffffff;
			border-radius: 40rpx;

			.avator {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50rpx;
				margin-bottom: 20rpx;
			}

			.name {
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #2e2e2e;
				margin-bottom: 22rpx;
			}

			.num {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 35rpx;
				color: #2e2e2e;
				margin-top: 10rpx;
			}
		}

		.rank-item__1 {
			width: 219rpx;
			height: 344rpx;
			background: #ffffff;
			border-radius: 40rpx;

			.tag1 {
				width: 153rpx;
				height: 50rpx;
				background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
				border-radius: 10rpx 10rpx 30rpx 30rpx;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}

			.avator {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin-bottom: 20rpx;
			}

			.name {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 18rpx;
			}

			.num {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #2e2e2e;
				margin-top: 18rpx;
			}
		}
	}
}

.rank-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14rpx 42rpx;
	width: 702rpx;
	height: 104rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0 auto 20rpx auto;

	.left {
		display: flex;
		align-items: center;

		.tag {
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #c5c5cb;
			width: 36rpx;
			height: 36rpx;
		}

		.avator {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin-left: 24rpx;
		}

		.info {
			margin-left: 26rpx;

			.name {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 14rpx;
			}
		}
	}

	.num {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #2e2e2e;
	}
}
.swiper-box {
	flex: 1;
	height: 100%;
}

.rank-list {
	height: 100%;

	margin-bottom: 100rpx;
}

.lv {
	display: flex;
	align-items: end;
	width: 158rpx;
	height: 25rpx;
	border-radius: 12rpx;
	position: relative;

	.lv-img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 14rpx;
		margin-right: 10rpx;
		border-radius: 30rpx;
	}

	.lv-text {
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 24rpx;
		transform: scale(0.625);
		white-space: nowrap;
		position: absolute;
		left: 20rpx;
	}
}
.lv--strong {
	background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}

.lv--king {
	background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}

.lv--fighter {
	background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}
</style>
